<template>
  <view class="new-group-page">
    <!-- 商品主图 -->
    <view class="product-main-image">
      <view>上传图片</view>
      <u-upload :max-count="2" :file-list="fileList" @after-read="handleAfterRead"></u-upload>
    </view>

    <!-- 商品标题 -->
    <view class="product-title">
      <view>商品标题</view>
      <u-input v-model="productTitle" placeholder="商品标题" />
    </view>

    <!-- 商品类型 -->
    <view class="product-type">
      <u-cell title="是否同步来客" is-link>
        <view slot="right-icon" class="custom-slot">
          <u-radio-group>
            <u-radio v-model="syncCustomer" label="无需同步" @change="handleChange" />
            <u-radio v-model="syncCustomer" label="需要同步" @change="handleChange" />
          </u-radio-group>
          
        </view>
      </u-cell>
      <u-cell title="商品品类" is-link>
        <u-action-sheet :list="categoryList" @click="handleCategoryClick" />
      </u-cell>
      <u-cell title="可用门店" is-link>
        <u-action-sheet :list="storeList" @click="handleStoreClick" />
      </u-cell>
    </view>

    <!-- 商品信息 -->
    <view class="product-info">
      <u-cell title="商品售卖开始日期" is-link>
        <u-datetime-picker v-model="startDate" type="date" @change="handleChange" />
      </u-cell>
      <u-cell title="商品售卖结束日期" is-link>
        <u-datetime-picker v-model="endDate" type="date" @change="handleChange" />
      </u-cell>
      <u-cell title="是否需要预约">
        <view slot="right-icon">
          <u-radio-group>
          <u-radio v-model="needReservation" label="无需预约" @change="handleChange" />
          <u-radio v-model="needReservation" label="需要预约" @change="handleChange" />
          </u-radio-group>
        </view>
      </u-cell>
      <u-cell title="使用规则">
        <u-action-sheet :list="ruleList" @click="handleRuleClick" />
      </u-cell>
      <u-cell title="建议使用人数">
        <u-input v-model="suggestedUsage" type="number" />
      </u-cell>
      <u-cell title="最多使用人数">
        <u-input v-model="maxUsage" type="number" />
      </u-cell>
      <u-cell title="可使用日期类型">
        <view slot="right-icon">
          <u-radio-group>
          <u-radio v-model="dateType" label="指定日期" @change="handleChange" />
          <u-radio v-model="dateType" label="指定天数" @change="handleChange" />
          </u-radio-group>
        </view>
      </u-cell>
      <u-cell title="可使用日期">
        <!-- <u-input v-model="usableDate"
                 type="text"
                 /> -->
        <view>
          <input type="text" placeholder="请输入可使用日期">
        </view>
      </u-cell>
      <u-cell title="投放渠道">
        <view slot="right-icon">
          <u-radio-group>
          <u-radio v-model="channel" label="不限制" @change="handleChange" />
          <u-radio v-model="channel" label="仅直播间可见" @change="handleChange" />
          </u-radio-group>
        </view>
      </u-cell>
      <u-cell title="虚拟销量">
        <u-input v-model="virtualSales" type="number" placeholder="请输入虚拟销量" />
      </u-cell>
      <u-cell title="售卖价">
        <u-input v-model="sellingPrice" type="number" placeholder="请输入售卖价" />
      </u-cell>
      <u-cell title="库存是否有上限">
        <view slot="right-icon">
          <u-radio-group>
          <u-radio v-model="stockLimit" label="有限库存" @change="handleChange" />
          <u-radio v-model="stockLimit" label="无限库存" @change="handleChange" />
          </u-radio-group>


          
        </view>
      </u-cell>
      <u-cell title="是否限购">
        <view slot="right-icon">
          <u-radio-group>
          <u-radio v-model="isLimitedPurchase" label="限购" @change="handleChange" />
          <u-radio v-model="isLimitedPurchase" label="不限购" @change="handleChange" />
          </u-radio-group>
        </view>
      </u-cell>
      <u-cell title="每人限购数量">
        <u-input v-model="limitedPurchaseQuantity" type="number" placeholder="请输入限购数量" />
      </u-cell>
      <u-cell title="菜品搭配">
        <u-action-sheet :list="dishCombinationList" @click="handleDishCombinationClick" />
      </u-cell>
      <u-cell title="活动描述">
        <u-action-sheet :list="activityDescriptionList" @click="handleActivityDescriptionClick" />
      </u-cell>
    </view>

    <!-- 团购详情 -->
    <view class="group-details">
      <u-cell title="商品简介">
        <u-input v-model="productDescription" type="textarea" placeholder="请输入关于商品的详细描述" />
      </u-cell>
      <u-cell title="商品图片简介">
        <u-upload :max-count="5" :file-list="imageFileList" @after-read="handleImageAfterRead">
          <view slot="default">
            <u-icon name="camera" size="30" color="#999" />
          </view>
        </u-upload>
      </u-cell>
    </view>

    <!-- 按钮 -->
    <view class="buttons">
      <u-button type="primary" @click="saveDraft">保存草稿</u-button>
      <u-button type="success" @click="submitForm">提交</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      productTitle: '',
      syncCustomer: '无需同步',
      categoryList: ['美食/地方菜/北京菜'],
      storeList: ['1家可用'],
      startDate: '',
      endDate: '',
      needReservation: '无需预约',
      ruleList: ['详情'],
      suggestedUsage: 2,
      maxUsage: 2,
      dateType: '指定日期',
      usableDate: '365',
      channel: '不限制',
      virtualSales: 0,
      sellingPrice: 0,
      stockLimit: '有限库存',
      isLimitedPurchase: '限购',
      limitedPurchaseQuantity: 0,
      dishCombinationList: ['详情'],
      activityDescriptionList: ['随时退'],
      imageFileList: [],
      productDescription: ''
    };
  },
  methods: {
    handleAfterRead(file) {
      // Handle file upload
    },
    handleChange(value, key) {
      this[key] = value;
    },
    handleCategoryClick(index) {
      // Handle category click
    },
    handleStoreClick(index) {
      // Handle store click
    },
    handleRuleClick(index) {
      // Handle rule click
    },
    handleDishCombinationClick(index) {
      // Handle dish combination click
    },
    handleActivityDescriptionClick(index) {
      // Handle activity description click
    },
    handleImageAfterRead(file) {
      // Handle image upload
    },
    saveDraft() {
      // Save draft logic
    },
    submitForm() {
      // Submit form logic
    }
  }
};
</script>

<style scoped>
.new-group-page {
  padding: 20upx;
}

.product-main-image {
  margin-bottom: 20upx;
}

.product-title {
  margin-bottom: 20upx;
}

.product-type {
  margin-bottom: 20upx;
}

.product-info {
  margin-bottom: 20upx;
}

.group-details {
  margin-bottom: 20upx;
}

.buttons {
  display: flex;
  justify-content: space-between;
}
</style>